<template>
<div class="search-wrap">
    <div class="fixed header">
      <van-nav-bar
        title="搜索商品"
        left-text="返回"
        left-arrow
        @click-left="fnNavBack"
        @click-right="bSearch = !bSearch"
      >
      <van-icon slot="right" name="search" />
      </van-nav-bar>
      <transition name="van-slide-down">
        <van-search v-show="bSearch" v-model="searchValue" placeholder="请输入搜索关键词" show-action shape="round">
            <div slot="action" @click="onSearch">搜索</div>
        </van-search>
      </transition>
    </div>

    <van-list
      v-model="bLoading"
      :finished="bEnd"
      finished-text="没有更多了"
      @load="getData"
    >
    <Goods v-if="bGoodsType" :data="aGoodsData" :type="0" :load="false" @getDetails="getDetails" />
    </van-list>
    <copyright />
</div>
</template>

<script>
import Goods from '@/common/goods/';
export default {
    name: 'Search',
    data(){
      return {
        searchValue:null,
        aGoodsData: [],
        bLoading: true,
        bEnd:false,
        n_c_page: 1,
        n_l_page: null,
        bSearch: false,
        bGoodsType: false
      }
    },
    components:{
      Goods
    },
    created(){
      this.searchValue = this.$route.query.value
      this.getData();
    },
    methods:{
      getData(){
        let params = {
          keywords : this.searchValue,
          token : sessionStorage.getItem('token'),
          page: this.n_c_page
        };
        this.axios.get('/api/store/search',{params}).then(r=>{
          this.n_c_page = r.data.data.current_page +1;
          this.n_l_page = r.data.data.last_page;
          if(r.data.data.current_page <= r.data.data.last_page){
            if(r.data.data.current_page == 1){
              this.aGoodsData = r.data.data.data;
            }else {
              this.aGoodsData = [...this.aGoodsData,...r.data.data.data];
            }
            this.bLoading = false;
          }else {
            this.bEnd = true;
            this.bLoading = false;
          }
          
        }).catch(err=>{
          console.log(err);
        })
        this.bSearch = false;
        this.bGoodsType = true;
      },
      onSearch(){
        this.aGoodsData= [];
        this.bGoodsType = false;
        this.getData();
      },
      getDetails(e) {
          this.global.state.productStore_goods = e;
          this.$router.push({
              name: 'productStore',
              path: './product/store'
          })
      },
      fnNavBack(){
        this.$router.go(-1)
      }
    }
}
</script>

<style lang="less" scoped>
.search-wrap {
  padding: 3.9286rem 0;
  .header {
    top: 0;
    left: 0;
    right: 0;
  }
}

</style>
